<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 320px;
      padding: 0;
      font-family: Arial, sans-serif;
      margin: 0;
      background: transparent;
    }
    
    .floating-menu {
      position: fixed;
      top: 20px;
      right: 20px;
      background: white;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      border: 1px solid #e0e0e0;
      z-index: 10000;
      transition: all 0.3s ease;
      overflow: hidden;
    }
    
    .menu-header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .menu-title {
      font-size: 14px;
      font-weight: 600;
    }
    
    .menu-controls {
      display: flex;
      gap: 8px;
    }
    
    .control-button {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: background-color 0.2s;
    }
    
    .control-button:hover {
      background: rgba(255,255,255,0.3);
    }
    
    .menu-container {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .menu-button {
      padding: 12px 16px;
      border: none;
      border-radius: 8px;
      color: white;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .menu-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .menu-button:active {
      transform: translateY(0);
    }
    
    .menu-button.manage {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .menu-button.scrape {
      background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    }
    
    .menu-button.export {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
    
    .menu-button::before {
      content: '';
      width: 16px;
      height: 16px;
      background: rgba(255,255,255,0.3);
      border-radius: 3px;
    }
    
    .minimized {
      width: 60px;
      height: 60px;
    }
    
    .minimized .menu-container {
      display: none;
    }
    
    .minimized .menu-header {
      padding: 18px;
      justify-content: center;
    }
    
    .minimized .menu-title {
      display: none;
    }
    
    .minimized .control-button {
      display: none;
    }
    
    .minimized .expand-button {
      display: block !important;
    }
    
    .expand-button {
      display: none;
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div class="floating-menu" id="floatingMenu">
    <div class="menu-header">
      <div class="menu-title">Prompt Manager</div>
      <div class="menu-controls">
        <button class="control-button minimize-button" id="minimizeMenu" title="缩小">−</button>
        <button class="control-button close-button" id="closeMenu" title="关闭">×</button>
      </div>
      <button class="expand-button" id="expandMenu" title="展开">+</button>
    </div>
    <div class="menu-container">
      <button class="menu-button manage" id="managePrompts">
        <span>📝</span> 提示词管理
      </button>
      <button class="menu-button scrape" id="scrapePrompts">
        <span>🕷️</span> 爬取提示词
      </button>
      <button class="menu-button export" id="exportPrompts">
        <span>📊</span> 导出Excel
      </button>
    </div>
  </div>
  
  <script src="popup.js"></script>
</body>
</html>
